<template>
  <div>
    <div class="list-item" 
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="item-name">
        <span>{{item.name}}</span>
      </div>
      <div v-if="item.children" class="children-item">
        <list :list="item.children"></list>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "List",
  props: {
    list: Array
  }
};
</script>
<style lang="scss" scoped>
.item-name {
  padding: 0.5em 0;
  border-bottom: 1px dashed #ccc;
  font-weight: bold;
}
.children-item {
  padding-left: 1em;
  color: #666;
  font-size: 0.8rem;
}
</style>
